<!DOCTYPE html>
<html lang=en>
<head>
    <!-- so meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
    <meta name="description" content="前端入门到精通从知乎上学习的关于前端的教程，感觉关于HTML和CSS这块讲解的不错，所以一直观看，然后做笔记进行记录。">
<meta property="og:type" content="article">
<meta property="og:title" content="HTML和CSS">
<meta property="og:url" content="https://ke-jiabiao.gitee.io/develop/2023/01/29/front_end/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/index.html">
<meta property="og:site_name" content="山野笨拙">
<meta property="og:description" content="前端入门到精通从知乎上学习的关于前端的教程，感觉关于HTML和CSS这块讲解的不错，所以一直观看，然后做笔记进行记录。">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20220830235757700.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20220903212806787.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20220903212832755.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20220903230845159.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20220904104539911.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230306225128725.png">
<meta property="og:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20230307091841627.png">
<meta property="article:published_time" content="2023-01-28T16:00:00.000Z">
<meta property="article:modified_time" content="2023-07-23T12:16:10.602Z">
<meta property="article:author" content="man虎下山">
<meta property="article:tag" content="HTML">
<meta property="article:tag" content="CSS">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://ke-jiabiao.gitee.io/develop/imgs/image-20220830235757700.png">
    
    
      
        
          <link rel="shortcut icon" href="/develop/images/favicon.ico">
        
      
      
        
          <link rel="icon" type="image/png" href="/develop/images/favicon-192x192.png" sizes="192x192">
        
      
      
        
          <link rel="apple-touch-icon" sizes="180x180" href="/develop/images/apple-touch-icon.png">
        
      
    
    <!-- title -->
    <title>HTML和CSS</title>
    <!-- async scripts -->
    <!-- Google Analytics -->


    <!-- Umami Analytics -->


    <!-- styles -->
    
<link rel="stylesheet" href="/develop/css/style.css">

    <!-- persian styles -->
    
    <!-- rss -->
    
    
	<!-- mathjax -->
	
<meta name="generator" content="Hexo 6.3.0"></head>

<body class="max-width mx-auto px3 ltr">
    
      <div id="header-post">
  <a id="menu-icon" href="#" aria-label="Menu"><i class="fa-solid fa-bars fa-lg"></i></a>
  <a id="menu-icon-tablet" href="#" aria-label="Menu"><i class="fa-solid fa-bars fa-lg"></i></a>
  <a id="top-icon-tablet" href="#" aria-label="Top" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" style="display:none;"><i class="fa-solid fa-chevron-up fa-lg"></i></a>
  <span id="menu">
    <span id="nav">
      <ul>
        <!--
       --><li><a href="/develop/">Home</a></li><!--
     --><!--
       --><li><a href="/develop/about/">About</a></li><!--
     --><!--
       --><li><a href="/develop/archives/">Writing</a></li><!--
     --><!--
       --><li><a target="_blank" rel="noopener" href="http://github.com/probberechts">Projects</a></li><!--
     -->
      </ul>
    </span>
    <br/>
    <span id="actions">
      <ul>
        
        <li><a class="icon" aria-label="Previous post" href="/develop/2023/03/22/after_end/C++%E6%95%99%E7%A8%8B%EF%BC%8849%20%E6%95%B0%E7%BB%84-%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84%E6%A1%88%E4%BE%8B-%E8%80%83%E8%AF%95%E6%88%90%E7%BB%A9%E7%BB%9F%E8%AE%A1%E5%93%94%E5%93%A9%E5%93%94%E5%93%A9bilibili%EF%BC%89/"><i class="fa-solid fa-chevron-left" aria-hidden="true" onmouseover="$('#i-prev').toggle();" onmouseout="$('#i-prev').toggle();"></i></a></li>
        
        
        <li><a class="icon" aria-label="Next post" href="/develop/2022/03/29/after_end/%E5%8D%9A%E5%9B%BE-%E9%A1%BA%E6%8E%A7%E6%8C%87%E4%BB%A4/"><i class="fa-solid fa-chevron-right" aria-hidden="true" onmouseover="$('#i-next').toggle();" onmouseout="$('#i-next').toggle();"></i></a></li>
        
        <li><a class="icon" aria-label="Back to top" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fa-solid fa-chevron-up" aria-hidden="true" onmouseover="$('#i-top').toggle();" onmouseout="$('#i-top').toggle();"></i></a></li>
        <li><a class="icon" aria-label="Share post" href="#"><i class="fa-solid fa-share-alt" aria-hidden="true" onmouseover="$('#i-share').toggle();" onmouseout="$('#i-share').toggle();" onclick="$('#share').toggle();return false;"></i></a></li>
      </ul>
      <span id="i-prev" class="info" style="display:none;">Previous post</span>
      <span id="i-next" class="info" style="display:none;">Next post</span>
      <span id="i-top" class="info" style="display:none;">Back to top</span>
      <span id="i-share" class="info" style="display:none;">Share post</span>
    </span>
    <br/>
    <div id="share" style="display: none">
      <ul>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.facebook.com/sharer.php?u=https://ke-jiabiao.gitee.io/develop/2023/01/29/front_end/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/"><i class="fab fa-facebook " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://twitter.com/share?url=https://ke-jiabiao.gitee.io/develop/2023/01/29/front_end/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&text=HTML和CSS"><i class="fab fa-twitter " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.linkedin.com/shareArticle?url=https://ke-jiabiao.gitee.io/develop/2023/01/29/front_end/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&title=HTML和CSS"><i class="fab fa-linkedin " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://pinterest.com/pin/create/bookmarklet/?url=https://ke-jiabiao.gitee.io/develop/2023/01/29/front_end/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&is_video=false&description=HTML和CSS"><i class="fab fa-pinterest " aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=HTML和CSS&body=Check out this article: https://ke-jiabiao.gitee.io/develop/2023/01/29/front_end/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/"><i class="fa-solid fa-envelope " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://getpocket.com/save?url=https://ke-jiabiao.gitee.io/develop/2023/01/29/front_end/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&title=HTML和CSS"><i class="fab fa-get-pocket " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://reddit.com/submit?url=https://ke-jiabiao.gitee.io/develop/2023/01/29/front_end/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&title=HTML和CSS"><i class="fab fa-reddit " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.stumbleupon.com/submit?url=https://ke-jiabiao.gitee.io/develop/2023/01/29/front_end/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&title=HTML和CSS"><i class="fab fa-stumbleupon " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://digg.com/submit?url=https://ke-jiabiao.gitee.io/develop/2023/01/29/front_end/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&title=HTML和CSS"><i class="fab fa-digg " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.tumblr.com/share/link?url=https://ke-jiabiao.gitee.io/develop/2023/01/29/front_end/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&name=HTML和CSS&description=&lt;h3 id=&#34;前端入门到精通&#34;&gt;&lt;a href=&#34;#前端入门到精通&#34; class=&#34;headerlink&#34; title=&#34;前端入门到精通&#34;&gt;&lt;/a&gt;前端入门到精通&lt;/h3&gt;&lt;p&gt;从知乎上学习的关于前端的教程，感觉关于HTML和CSS这块讲解的不错，所以一直观看，然后做笔记进行记录。&lt;/p&gt;"><i class="fab fa-tumblr " aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://news.ycombinator.com/submitlink?u=https://ke-jiabiao.gitee.io/develop/2023/01/29/front_end/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&t=HTML和CSS"><i class="fab fa-hacker-news " aria-hidden="true"></i></a></li>
</ul>

    </div>
    <div id="toc">
      <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A"><span class="toc-number">1.</span> <span class="toc-text">前端入门到精通</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E5%90%8E%E4%BB%A3%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">1.1.</span> <span class="toc-text">1.后代选择器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">1.2.</span> <span class="toc-text">2.选择器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-margin"><span class="toc-number">1.3.</span> <span class="toc-text">3.margin</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#3-1margin%E5%AE%9E%E7%8E%B0%E5%85%83%E7%B4%A0%E8%87%AA%E5%8A%A8%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD"><span class="toc-number">1.3.1.</span> <span class="toc-text">3.1margin实现元素自动水平居中</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3-2-margin-top%E7%88%B6%E5%AD%90%E9%97%B4%E8%B7%9D%E7%9A%84%E2%80%9C%E6%84%8F%E5%A4%96%E2%80%9D%EF%BC%88margin-top%E7%9A%84%E4%BC%A0%E9%80%92%E9%97%AE%E9%A2%98%EF%BC%89"><span class="toc-number">1.3.2.</span> <span class="toc-text">3.2 margin-top父子间距的“意外”（margin-top的传递问题）</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3-3-margin%E7%9A%84%E4%B8%8A%E4%B8%8B%E9%97%B4%E8%B7%9D%E9%87%8D%E5%8F%A0%E9%97%AE%E9%A2%98"><span class="toc-number">1.3.3.</span> <span class="toc-text">3.3 margin的上下间距重叠问题</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-list%E5%B1%9E%E6%80%A7"><span class="toc-number">1.4.</span> <span class="toc-text">4.list属性</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#4-1list%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7"><span class="toc-number">1.4.1.</span> <span class="toc-text">4.1list相关属性</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-%E8%BE%B9%E6%A1%86"><span class="toc-number">1.5.</span> <span class="toc-text">5.边框</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#5-1border-such-as-5px-solid-blue-%E2%80%94%E2%80%94%E5%A4%A7%E5%B0%8F-%E5%BD%A2%E7%8A%B6-%E9%A2%9C%E8%89%B2"><span class="toc-number">1.5.1.</span> <span class="toc-text">5.1border(such as:5px solid blue)  ——大小 形状 颜色</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#5-2%E8%BE%B9%E6%A1%86%E9%AB%98%E7%BA%A7%E7%94%A8%E6%B3%95-%E8%BE%B9%E6%A1%86%E4%B8%89%E8%A7%92%E5%BD%A2"><span class="toc-number">1.5.2.</span> <span class="toc-text">5.2边框高级用法(边框三角形)</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-%E5%AE%9E%E6%88%98%E6%A1%88%E4%BE%8B%EF%BC%88%E9%87%8D%E8%A6%81%E2%80%94%E5%8C%85%E6%8B%AC%E6%B5%AE%E5%8A%A8%E7%AD%89%EF%BC%89"><span class="toc-number">1.6.</span> <span class="toc-text">6.实战案例（重要—包括浮动等）</span></a></li></ol></li></ol>
    </div>
  </span>
</div>

    
    <div class="content index py4 ">
        
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    
    <h1 class="posttitle p-name" itemprop="name headline">
        HTML和CSS
    </h1>



    <div class="meta">
      <span class="author p-author h-card" itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span class="p-name" itemprop="name">man虎下山</span>
      </span>
      
    <div class="postdate">
      
        <time datetime="2023-01-28T16:00:00.000Z" class="dt-published" itemprop="datePublished">2023-01-29</time>
        
      
    </div>


      
    <div class="article-category">
        <i class="fa-solid fa-archive"></i>
        <a class="category-link" href="/develop/categories/front-end/">front_end</a>
    </div>


      
    <div class="article-tag">
        <i class="fa-solid fa-tag"></i>
        <a class="p-category" href="/develop/tags/CSS/" rel="tag">CSS</a>, <a class="p-category" href="/develop/tags/HTML/" rel="tag">HTML</a>
    </div>


    </div>
  </header>
  

  <div class="content e-content" itemprop="articleBody">
    <h3 id="前端入门到精通"><a href="#前端入门到精通" class="headerlink" title="前端入门到精通"></a>前端入门到精通</h3><p>从知乎上学习的关于前端的教程，感觉关于HTML和CSS这块讲解的不错，所以一直观看，然后做笔记进行记录。</p>
<span id="more"></span>

<h4 id="1-后代选择器"><a href="#1-后代选择器" class="headerlink" title="1.后代选择器"></a>1.后代选择器</h4><div class="nav">
    <div class="nav-center">
        <ul> 
            <li><a href="">首页</a></li>
            <li><a href="">首页</a></li>
            <li><a href="">首页</a></li>
            <li><a href="">首页</a></li>
            <li class="url"><a href="">首页</a></li>
               <li class="url"><a href="">首页</a></li>
            <li class="url"><a href="">首页</a></li>
            <li class="url"><a href="">首页</a></li>
            <!无序列表-->
        </ul>
    </div>
</div>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">       <span class="selector-class">.nav</span> <span class="selector-class">.nav-center</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span>&#123;</span><br><span class="line">        <span class="attribute">float</span><span class="selector-pseudo">:left</span></span><br><span class="line">        &#125;(先选择<span class="selector-tag">nav</span>再选<span class="selector-tag">nav</span>-center再选<span class="selector-tag">ul</span>最后选<span class="selector-tag">li</span>)</span><br><span class="line">后代选择器的用法是用在相同标签里的同个class类，减少起名</span><br></pre></td></tr></table></figure>

<h4 id="2-选择器"><a href="#2-选择器" class="headerlink" title="2.选择器"></a>2.选择器</h4><p>css行内样式&gt;内部样式(style标签内）&#x3D;外部样式（css文件） 后两者采取<strong>就近原则</strong></p>
<ol>
<li><p>类型（元素)选择器</p>
</li>
<li><p>class选择器（类选择器）</p>
</li>
<li><p>id选择器</p>
</li>
<li><p>内联样式</p>
<p><img src="/develop/imgs/image-20220830235757700.png" alt="image-20220830235757700"></p>
<p><a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_38211198/article/details/100062647">【CSS】内联样式，内部样式表，外部样式表_GreAmbWang的博客-CSDN博客</a></p>
</li>
</ol>
<h4 id="3-margin"><a href="#3-margin" class="headerlink" title="3.margin"></a>3.margin</h4><h5 id="3-1margin实现元素自动水平居中"><a href="#3-1margin实现元素自动水平居中" class="headerlink" title="3.1margin实现元素自动水平居中"></a>3.1margin实现元素自动水平居中</h5><p><strong>margin:auto</strong> css语句中可实现水平居中</p>
<p><strong>消除内外间距留白</strong>:   </p>
<p>*{</p>
<pre><code> margin: 0;
</code></pre>
<p>​	 padding: 0;</p>
<p>}</p>
<p>hexo-theme-nexmoe-master</p>
<h5 id="3-2-margin-top父子间距的“意外”（margin-top的传递问题）"><a href="#3-2-margin-top父子间距的“意外”（margin-top的传递问题）" class="headerlink" title="3.2 margin-top父子间距的“意外”（margin-top的传递问题）"></a>3.2 margin-top父子间距的“意外”（margin-top的传递问题）</h5><p> margin在包含结构里面，如果给子元素设置了margin-top间距，这个时候父元素也会有上间距，这就是margin-top的传递</p>
<p><strong>解决方法</strong>：1.给父元素添加overflow：hidden。2.给父元素添上边框-border-top 1px solid(实现) transparent(透明色)</p>
<p>margin的上下间距重叠问题 </p>
<h5 id="3-3-margin的上下间距重叠问题"><a href="#3-3-margin的上下间距重叠问题" class="headerlink" title="3.3 margin的上下间距重叠问题"></a>3.3 margin的上下间距重叠问题</h5><p>在并列结构中，如果给上面的盒子添加了margin-bottom，给下面的盒子添加了margin-top，浏览器解析的结果是这两个数值中最大的数值间距，这个是发生重叠</p>
<p><strong>解决方法</strong>：给下面的盒子添加一个父元素，且给父元素添加overflow：hidden</p>
<h4 id="4-list属性"><a href="#4-list属性" class="headerlink" title="4.list属性"></a>4.list属性</h4><h5 id="4-1list相关属性"><a href="#4-1list相关属性" class="headerlink" title="4.1list相关属性"></a>4.1list相关属性</h5><ul>
<li>list-style-position:（inside&#x2F;outside） <strong>决定无序列表前的序号&#x2F;符号在列表内或者外</strong></li>
<li>list-style-image：url（） <strong>更改无序列表前的序号&#x2F;符号表现形式</strong></li>
<li>list-style-type:(saqure&#x2F;none&#x2F;disc&#x2F;circle)</li>
</ul>
<p>以上三个都可以写作list-style</p>
<h4 id="5-边框"><a href="#5-边框" class="headerlink" title="5.边框"></a>5.边框</h4><h5 id="5-1border-such-as-5px-solid-blue-——大小-形状-颜色"><a href="#5-1border-such-as-5px-solid-blue-——大小-形状-颜色" class="headerlink" title="5.1border(such as:5px solid blue)  ——大小 形状 颜色"></a>5.1border(such as:5px solid blue)  ——大小 形状 颜色</h5><p>可以拆分为下面三个分别写<strong>css</strong></p>
<ul>
<li>border-width:<strong>px</strong></li>
<li>border-color: <strong>color</strong></li>
<li>border-style: <strong>solid(实线)&#x2F;dash(虚线)&#x2F;dotted(点状线</strong>)</li>
</ul>
<p><strong>诸如此类还有上下左右边框，如border-top —上边框</strong></p>
<h5 id="5-2边框高级用法-边框三角形"><a href="#5-2边框高级用法-边框三角形" class="headerlink" title="5.2边框高级用法(边框三角形)"></a>5.2边框高级用法(边框三角形)</h5><p>&lt;div—-class&#x3D;”box”&gt;</div></p>
<p>.box{</p>
<p>​	border: 10px solid transparent;</p>
<p>​	border-top: 10px solid red;</p>
<p>​	width: 0;</p>
<p>​	height: 0;</p>
<p>}</p>
<p><img src="/develop/imgs/image-20220903212806787.png" alt="image-20220903212806787"></p>
<p><img src="/develop/imgs/image-20220903212832755.png" alt="image-20220903212832755"></p>
<h4 id="6-实战案例（重要—包括浮动等）"><a href="#6-实战案例（重要—包括浮动等）" class="headerlink" title="6.实战案例（重要—包括浮动等）"></a>6.实战案例（重要—包括浮动等）</h4><p>仿照该图做出1：1案例</p>
<p><img src="/develop/imgs/image-20220903230845159.png" alt="image-20220903230845159"></p>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100%;
            height: 251px;
            background-color: #e5e5e5;
        }
        .center{
            width: 961px;
            height: 251px;
            margin: 0 auto;
        }
        .left{
            width: 452px;
            height: 251px;
            float: left;				
        }
        .middle{
            width: 153px;
            height: 251px;
            float: left;
            margin-left: 45px;
            margin-right: 45px
        }
        .right{
            width: 256px;
            height: 251px;
            float: right;

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">		*&#123;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">padding</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">margin</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="language-css">		&#125;</span></span><br><span class="line"><span class="language-css">		<span class="selector-class">.box</span>&#123;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">width</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">height</span>: <span class="number">251px</span>;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">background-color</span>: <span class="number">#e5e5e5</span>;</span></span><br><span class="line"><span class="language-css">		&#125;</span></span><br><span class="line"><span class="language-css">		<span class="selector-class">.center</span>&#123;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">width</span>: <span class="number">961px</span>;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">height</span>: <span class="number">251px</span>;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">margin</span>: <span class="number">0</span> auto;</span></span><br><span class="line"><span class="language-css">		&#125;</span></span><br><span class="line"><span class="language-css">		<span class="selector-class">.left</span>&#123;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">width</span>: <span class="number">452px</span>;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">height</span>: <span class="number">251px</span>;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">float</span>: left;				</span></span><br><span class="line"><span class="language-css">		&#125;</span></span><br><span class="line"><span class="language-css">		<span class="selector-class">.middle</span>&#123;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">width</span>: <span class="number">153px</span>;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">height</span>: <span class="number">251px</span>;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">float</span>: left;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">margin-left</span>: <span class="number">45px</span>;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">margin-right</span>: <span class="number">45px</span></span></span><br><span class="line"><span class="language-css">		&#125;</span></span><br><span class="line"><span class="language-css">		<span class="selector-class">.right</span>&#123;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">width</span>: <span class="number">256px</span>;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">height</span>: <span class="number">251px</span>;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">float</span>: right;</span></span><br><span class="line"><span class="language-css">			</span></span><br><span class="line"><span class="language-css">		&#125;</span></span><br><span class="line"><span class="language-css">		<span class="selector-class">.two</span>&#123;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">margin-left</span>: <span class="number">68px</span>;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">margin-right</span>: <span class="number">68px</span>;</span></span><br><span class="line"><span class="language-css">		&#125;</span></span><br><span class="line"><span class="language-css">		<span class="selector-class">.center</span> <span class="selector-tag">h3</span>&#123;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">font-size</span>: <span class="number">16px</span>;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">color</span>: <span class="number">#a0a0a0</span>;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">font-weight</span>: <span class="number">500</span>;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">border-bottom</span>: <span class="number">1px</span> solid <span class="number">#c1c1c1</span>;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">line-height</span>: <span class="number">1</span>;<span class="comment">/*清除文本自带的间距*/</span></span></span><br><span class="line"><span class="language-css">			<span class="attribute">padding</span>: <span class="number">30px</span> <span class="number">0px</span> <span class="number">12px</span> <span class="number">12px</span>;</span></span><br><span class="line"><span class="language-css">			</span></span><br><span class="line"><span class="language-css">		&#125;</span></span><br><span class="line"><span class="language-css">		<span class="selector-tag">div</span> <span class="selector-tag">ul</span>&#123;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">float</span>: left;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">font-size</span>: <span class="number">12px</span>;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">margin-top</span>: <span class="number">16px</span>;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">list-style</span>: none;<span class="comment">/*清楚无序列表前的点*/</span></span></span><br><span class="line"><span class="language-css">		&#125;</span></span><br><span class="line"><span class="language-css">		<span class="selector-tag">div</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span>&#123;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">line-height</span>: <span class="number">24px</span>; <span class="comment">/* 行高为文字顶部到文字顶部之间的距离 */</span></span></span><br><span class="line"><span class="language-css">			<span class="attribute">text-indent</span>: <span class="number">14px</span>;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">margin-left</span>: <span class="number">10px</span>;</span></span><br><span class="line"><span class="language-css">		&#125;</span></span><br><span class="line"><span class="language-css">		<span class="selector-tag">div</span> <span class="selector-tag">ul</span> <span class="selector-tag">a</span>&#123;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">text-decoration</span>: none; <span class="comment">/* 去除a标签的下划线 */</span></span></span><br><span class="line"><span class="language-css">		&#125;</span></span><br><span class="line"><span class="language-css">		</span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="comment">&lt;!--大的布局--&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!--版心--&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;center&quot;</span>&gt;</span></span><br><span class="line">				<span class="comment">&lt;!-- 左布局 --&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;left&quot;</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">h3</span>&gt;</span>产品中心<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>汽车电机<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>汽车电书机<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>汽车电机<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">&quot;two&quot;</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>汽车电机<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>汽车电机<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>汽车电机<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>汽车电机<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>汽车电机<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>汽车电机<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- 中布局 --&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;middle&quot;</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">h3</span>&gt;</span>技术研发<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>汽车电机<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>汽车电书机<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>汽车电机<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">				<span class="comment">&lt;!-- 右布局 --&gt;</span></span><br><span class="line">				<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;right&quot;</span>&gt;</span></span><br><span class="line">					<span class="tag">&lt;<span class="name">h3</span>&gt;</span>营销网络<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>汽车电机<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>汽车电书机<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">							<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>汽车电机<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">						<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">				<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="7-背景相关属性"><a href="#7-背景相关属性" class="headerlink" title="7.背景相关属性"></a>7.背景相关属性</h4><p><img src="/develop/imgs/image-20220904104539911.png" alt="image-20220904104539911"></p>
<h4 id="8-css文本相关属性"><a href="#8-css文本相关属性" class="headerlink" title="8.css文本相关属性"></a>8.css文本相关属性</h4><h5 id="8-1-text-align-justify"><a href="#8-1-text-align-justify" class="headerlink" title="8.1 text-align:justify"></a>8.1 text-align:justify</h5><p>水平两端对齐，但是只对多行起作用，单行文本两端对齐是text-aligin-last:justify</p>
<h5 id="8-2-text-decoration"><a href="#8-2-text-decoration" class="headerlink" title="8.2 text-decoration"></a>8.2 text-decoration</h5><p>属性值为none的时候一般用在<strong>a标签</strong>，或者使用line-through（这个为删除线）</p>
<h5 id="8-3-text-indent"><a href="#8-3-text-indent" class="headerlink" title="8.3 text-indent"></a>8.3 text-indent</h5><p>控制首行缩进</p>
<h5 id="8-4-自适应和高度塌陷"><a href="#8-4-自适应和高度塌陷" class="headerlink" title="8.4 自适应和高度塌陷"></a>8.4 自适应和高度塌陷</h5><p>自适应：1.用百分比  2.只设定高度或者宽度之一</p>
<p>高度塌陷：当子容器使用<strong>浮动（脱离文档流操作的时候）</strong>，父容器的高度就会塌陷，解决方法有：</p>
<p>1.给塌陷的容器使用overflow：hidden</p>
<p>2.万能方法使用 父容器：after{content:””;display:block;clear:both}</p>
<h4 id="9-BFC（块级格式化上下文）"><a href="#9-BFC（块级格式化上下文）" class="headerlink" title="9.BFC（块级格式化上下文）"></a>9.BFC（块级格式化上下文）</h4><p><img src="/develop/imgs/image-20230306225128725.png" alt="image-20230306225128725"></p>
<p><img src="/develop/imgs/image-20230307091841627.png" alt="image-20230307091841627"></p>

  </div>
</article>



        
          <div id="footer-post-container">
  <div id="footer-post">

    <div id="nav-footer" style="display: none">
      <ul>
        
          <li><a href="/develop/">Home</a></li>
        
          <li><a href="/develop/about/">About</a></li>
        
          <li><a href="/develop/archives/">Writing</a></li>
        
          <li><a target="_blank" rel="noopener" href="http://github.com/probberechts">Projects</a></li>
        
      </ul>
    </div>

    <div id="toc-footer" style="display: none">
      <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A"><span class="toc-number">1.</span> <span class="toc-text">前端入门到精通</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E5%90%8E%E4%BB%A3%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">1.1.</span> <span class="toc-text">1.后代选择器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">1.2.</span> <span class="toc-text">2.选择器</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-margin"><span class="toc-number">1.3.</span> <span class="toc-text">3.margin</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#3-1margin%E5%AE%9E%E7%8E%B0%E5%85%83%E7%B4%A0%E8%87%AA%E5%8A%A8%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD"><span class="toc-number">1.3.1.</span> <span class="toc-text">3.1margin实现元素自动水平居中</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3-2-margin-top%E7%88%B6%E5%AD%90%E9%97%B4%E8%B7%9D%E7%9A%84%E2%80%9C%E6%84%8F%E5%A4%96%E2%80%9D%EF%BC%88margin-top%E7%9A%84%E4%BC%A0%E9%80%92%E9%97%AE%E9%A2%98%EF%BC%89"><span class="toc-number">1.3.2.</span> <span class="toc-text">3.2 margin-top父子间距的“意外”（margin-top的传递问题）</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3-3-margin%E7%9A%84%E4%B8%8A%E4%B8%8B%E9%97%B4%E8%B7%9D%E9%87%8D%E5%8F%A0%E9%97%AE%E9%A2%98"><span class="toc-number">1.3.3.</span> <span class="toc-text">3.3 margin的上下间距重叠问题</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-list%E5%B1%9E%E6%80%A7"><span class="toc-number">1.4.</span> <span class="toc-text">4.list属性</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#4-1list%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7"><span class="toc-number">1.4.1.</span> <span class="toc-text">4.1list相关属性</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-%E8%BE%B9%E6%A1%86"><span class="toc-number">1.5.</span> <span class="toc-text">5.边框</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#5-1border-such-as-5px-solid-blue-%E2%80%94%E2%80%94%E5%A4%A7%E5%B0%8F-%E5%BD%A2%E7%8A%B6-%E9%A2%9C%E8%89%B2"><span class="toc-number">1.5.1.</span> <span class="toc-text">5.1border(such as:5px solid blue)  ——大小 形状 颜色</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#5-2%E8%BE%B9%E6%A1%86%E9%AB%98%E7%BA%A7%E7%94%A8%E6%B3%95-%E8%BE%B9%E6%A1%86%E4%B8%89%E8%A7%92%E5%BD%A2"><span class="toc-number">1.5.2.</span> <span class="toc-text">5.2边框高级用法(边框三角形)</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#6-%E5%AE%9E%E6%88%98%E6%A1%88%E4%BE%8B%EF%BC%88%E9%87%8D%E8%A6%81%E2%80%94%E5%8C%85%E6%8B%AC%E6%B5%AE%E5%8A%A8%E7%AD%89%EF%BC%89"><span class="toc-number">1.6.</span> <span class="toc-text">6.实战案例（重要—包括浮动等）</span></a></li></ol></li></ol>
    </div>

    <div id="share-footer" style="display: none">
      <ul>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.facebook.com/sharer.php?u=https://ke-jiabiao.gitee.io/develop/2023/01/29/front_end/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/"><i class="fab fa-facebook fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://twitter.com/share?url=https://ke-jiabiao.gitee.io/develop/2023/01/29/front_end/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&text=HTML和CSS"><i class="fab fa-twitter fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.linkedin.com/shareArticle?url=https://ke-jiabiao.gitee.io/develop/2023/01/29/front_end/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&title=HTML和CSS"><i class="fab fa-linkedin fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://pinterest.com/pin/create/bookmarklet/?url=https://ke-jiabiao.gitee.io/develop/2023/01/29/front_end/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&is_video=false&description=HTML和CSS"><i class="fab fa-pinterest fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" href="mailto:?subject=HTML和CSS&body=Check out this article: https://ke-jiabiao.gitee.io/develop/2023/01/29/front_end/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/"><i class="fa-solid fa-envelope fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://getpocket.com/save?url=https://ke-jiabiao.gitee.io/develop/2023/01/29/front_end/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&title=HTML和CSS"><i class="fab fa-get-pocket fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://reddit.com/submit?url=https://ke-jiabiao.gitee.io/develop/2023/01/29/front_end/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&title=HTML和CSS"><i class="fab fa-reddit fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.stumbleupon.com/submit?url=https://ke-jiabiao.gitee.io/develop/2023/01/29/front_end/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&title=HTML和CSS"><i class="fab fa-stumbleupon fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://digg.com/submit?url=https://ke-jiabiao.gitee.io/develop/2023/01/29/front_end/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&title=HTML和CSS"><i class="fab fa-digg fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="http://www.tumblr.com/share/link?url=https://ke-jiabiao.gitee.io/develop/2023/01/29/front_end/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&name=HTML和CSS&description=&lt;h3 id=&#34;前端入门到精通&#34;&gt;&lt;a href=&#34;#前端入门到精通&#34; class=&#34;headerlink&#34; title=&#34;前端入门到精通&#34;&gt;&lt;/a&gt;前端入门到精通&lt;/h3&gt;&lt;p&gt;从知乎上学习的关于前端的教程，感觉关于HTML和CSS这块讲解的不错，所以一直观看，然后做笔记进行记录。&lt;/p&gt;"><i class="fab fa-tumblr fa-lg" aria-hidden="true"></i></a></li>
  <li><a class="icon" target="_blank" rel="noopener" href="https://news.ycombinator.com/submitlink?u=https://ke-jiabiao.gitee.io/develop/2023/01/29/front_end/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/&t=HTML和CSS"><i class="fab fa-hacker-news fa-lg" aria-hidden="true"></i></a></li>
</ul>

    </div>

    <div id="actions-footer">
        <a id="menu" class="icon" href="#" onclick="$('#nav-footer').toggle();return false;"><i class="fa-solid fa-bars fa-lg" aria-hidden="true"></i> Menu</a>
        <a id="toc" class="icon" href="#" onclick="$('#toc-footer').toggle();return false;"><i class="fa-solid fa-list fa-lg" aria-hidden="true"></i> TOC</a>
        <a id="share" class="icon" href="#" onclick="$('#share-footer').toggle();return false;"><i class="fa-solid fa-share-alt fa-lg" aria-hidden="true"></i> Share</a>
        <a id="top" style="display:none" class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"><i class="fa-solid fa-chevron-up fa-lg" aria-hidden="true"></i> Top</a>
    </div>

  </div>
</div>

        
        <footer id="footer">
  <div class="footer-left">
    Copyright &copy;
    
    
    2016-2023
    man虎下山
  </div>
  <div class="footer-right">
    <nav>
      <ul>
        <!--
       --><li><a href="/develop/">Home</a></li><!--
     --><!--
       --><li><a href="/develop/about/">About</a></li><!--
     --><!--
       --><li><a href="/develop/archives/">Writing</a></li><!--
     --><!--
       --><li><a target="_blank" rel="noopener" href="http://github.com/probberechts">Projects</a></li><!--
     -->
      </ul>
    </nav>
  </div>
</footer>

    </div>
    <!-- styles -->



  <link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'"/>


    <!-- jquery -->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>




<!-- clipboard -->

  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.7/clipboard.min.js" crossorigin="anonymous"></script>
  
  <script type="text/javascript">
  $(function() {
    // copy-btn HTML
    var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"Copy to clipboard!\">";
    btn += '<i class="fa-regular fa-clone"></i>';
    btn += '</span>';
    // mount it!
    $(".highlight table").before(btn);
    var clip = new ClipboardJS('.btn-copy', {
      text: function(trigger) {
        return Array.from(trigger.nextElementSibling.querySelectorAll('.code')).reduce((str,it)=>str+it.innerText+'\n','')
      }
    });
    clip.on('success', function(e) {
      e.trigger.setAttribute('aria-label', "Copied!");
      e.clearSelection();
    })
  })
  </script>


<script src="/develop/js/main.js"></script>

<!-- search -->

<!-- Baidu Analytics -->

<!-- Cloudflare Analytics -->

<!-- Disqus Comments -->

<!-- utterances Comments -->

</body>
</html>
